<template>
    <a-drawer
        :title="title"
        :visible="true"
        :width="width"
        :confirm-loading="loading"
        @ok="submitVisible"
        @close="cancelVisible"
        :maskClosable="false"
    >
        <a-spin :spinning="loading" tip="Loading...">
            <slot />
        </a-spin>

        <div class="footer" v-if="footer">
            <div
                :style="{
                    position: 'absolute',
                    bottom: 0,
                    width: '100%',
                    padding: '10px 16px',
                    textAlign: 'right',
                    left: 0,
                    display:'flex',
                    flexDirection:'row',
                    alignItems:'center',
                    background: theme=='dark'?'#1B232E':'#fff',
                    borderRadius: '0 0 4px 4px',
                    zIndex: 9
                }"
            >
                <div class="flex-item">
                    <slot name="msg" />
                </div>
                <a-button v-if="isCancel" style="marginRight: 8px" @click="cancelVisible">
                   {{cancelText}}
                </a-button>
                <a-button v-if="isReset" style="marginRight: 8px" @click="resetHandle">
                    重 置
                </a-button>
                <a-button type="primary" v-if="isSure" :loading="loading" @click="submitVisible">
                    {{submitText}}
                </a-button>
                <slot name="extra" />
            </div>
        </div>
        <!-- <span v-if="footer" slot="footer" class="dialog-footer">
        <slot name="footer">
            <a-button @click="cancelVisible">取 消</a-button>
            <a-button type="primary" :loading="loading" @click="submitVisible">确 定</a-button>
        </slot>
        </span>
        <slot /> -->
    </a-drawer>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'ShowModal',
    props: {
        title: {
            type: String,
            default: ''
        },
        width: {
            type: String,
            default: '500px'
        },
        loading: {
            type: Boolean,
            default: false
        },
        footer: {
            type: Boolean,
            default: true
        },
        isSure: {
            type: Boolean,
            default: true
        },
        isCancel: {
            type: Boolean,
            default: true
        },
        isReset: {
            type: Boolean,
            default: false
        },
        cancelText:{
            type:String,
            default:"取 消"
        },
        submitText:{
            type:String,
            default:"确 定"
        }
    },
    computed: {
        ...mapState({
            theme: state => state.setting.theme
        })
    },
    methods: {
        cancelVisible() {
            if (this.loading) return false;
            this.$emit('cancel');
        },
        submitVisible() {
            this.$emit('submit');
        },
        resetHandle(){
            this.$emit('reset')
        }
    }
};
</script>
<style lang="scss" scoped>
// .footer {
//     position: 'absolute';
//     bottom: 0;
//     width: '100%';
//     border-top: '1px solid #e8e8e8';
//     padding: '10px 16px';
//     text-align: 'right';
//     left: 0;
//     background: '#fff';
//     border-radius: '0 0 4px 4px';
// }
::v-deep .ant-drawer-body {
    padding-bottom: 44px;
}
.footer {
    height: 28px;
}
</style>
